<template>
  <div :id="'myChart'+type"></div>
</template>
  
<script setup lang='ts'>
import * as echart from 'echarts';
import chinaMap from '@/assets/china.json'
import {ref,onMounted, watch} from 'vue'
let myChart = ref()
const { chartData, type } = defineProps(['chartData', 'type'])
const setMapChart = () => {
  myChart.value.setOption({
      title : {
          text: '实时行驶车辆一览',
          subtext: 'Show Data',
          left: 'center',
          top: 'top',
          textStyle: {
              color: '#fff'
          }
      },
      legend: {
          left: 'left',
          data: ['强', '中', '弱'],
          textStyle: {
              color: '#ccc'
          }
      },
      // backgroundColor: {
      //     type: 'linear',
      //     x: 0,
      //     y: 0,
      //     x2: 1,
      //     y2: 1,
      //     colorStops: [{
      //         offset: 0, color: '#0f2c701f' // 0% 处的颜色
      //     }, {
      //         offset: 1, color: '#0917321f' // 100% 处的颜色
      //     }],
      //     globalCoord: false // 缺省为 false
      // },
      geo: {
          map: 'china',
          show: true,
          zoom: 1.5,
          roam: true,
          top: 100,
          label: {
              emphasis: {
                  show: false
              }
          },
          itemStyle: {
              normal: {
                  areaColor: '#193B7A80',
                  borderColor: '#3769AA',
              }
          }
      },
      series: [
          {
              type: 'map',
              map: 'china',
              zoom: 1.5,
              geoIndex: 1,
              aspectScale: 0.75, //长宽比
              showLegendSymbol: true, // 存在legend时显示
              top: 100,
              label: {
                  normal: {
                      show: false,
                  },
                  emphasis: {
                      show: false,
                      textStyle: {
                          color: '#fff'
                      }
                  }
              },
              roam: true,
              itemStyle: {
                  normal: {
                      areaColor: 'rgba(0, 0, 0, 0)',
                      borderColor: '#3769AA',
                      borderWidth: 1
                  }
              },
              data:[
                  {name: '北京',value: 21300 }
              ]
          },
          {
              name: '城市',
              type: 'scatter',
              coordinateSystem: 'geo',
              data:chartData,//需要[{name:城市名字,value:[经度，维度，数量]}]
              symbolSize: function (val: number[]) {
                  return val[2] / 20;
              },
              label: {
                  normal: {
                      formatter: '{b}',
                      position: 'right',
                      show: false
                  },
                  emphasis: {
                      show: true
                  }
              },
              itemStyle: {
                  normal: {
                      color: '#ddb926'
                  }
              }
          },
          {
              name: '前5',
              type: 'effectScatter',
              coordinateSystem: 'geo',
              data: chartData.sort(function (a: number[], b: number[]) {
                  return b[2] - a[2];
              }).slice(0, 6),
              symbolSize: function (val: number[]) {
                  return val[2] / 20;
              },
              showEffectOn: 'render',
              rippleEffect: {
                  brushType: 'stroke'
              },
              hoverAnimation: true,
              label: {
                  normal: {
                      formatter: '{b}',
                      position: 'right',
                      show: true
                  }
              },
              itemStyle: {
                  normal: {
                      color: '#f4e925',
                      shadowBlur: 10,
                      shadowColor: '#333'
                  }
              },
              zlevel: 1
          }
      ]
  });
}
const setLineChart = () => {
  console.log(chartData)
  const labelData: string[] = []
  const valueData:number[] = []
  chartData.map((item: { label: any; value: any; }) => {
    labelData.push(item.label)
    valueData.push(item.value)
  })
  console.log(labelData, valueData)
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    grid: {
      top: '3%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        axisLine: {
          lineStyle: {
            color: '#395084',                        //线的类型        (可选solid  dotted  dashed)
            opacity: 0.5 
          }
        },
        axisLabel: {
          color: '#FFFFFF',
          opacity: 1
        },
        type: 'category',
        boundaryGap: false,
        data: labelData
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisLabel: {
          color: '#FFFFFF',
          opacity: 1
        },
        splitLine: {
          lineStyle:{
            type: 'dashed',
            color: '#395084',                        //线的类型        (可选solid  dotted  dashed)
            opacity: 0.5 
          }
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#395084',                        //线的类型        (可选solid  dotted  dashed)
            opacity: 0.5 
          }
        },
      }
    ],
    series: [
      {
        name: 'Line 2',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          color:'#1CB2F0'
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.2,
          color: new echart.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#1CB2F0'
            },
            {
              offset: 1,
              color: '#203F74'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: valueData
      }
    ]
  };
  myChart.value.setOption(option)
}
onMounted(() => {
  myChart.value = echart.init(document.getElementById('myChart'+type))
  if(type==='map') {
    echart.registerMap('china', { geoJSON: chinaMap })
    setMapChart()
  } else if(type==='line') {
    setLineChart()
  }
})

  
</script>
  
<style></style>